<!DOCTYPE html>
<html>
<head>
    <title>欢迎页面-X-admin2.2</title>
    <script th:replace="~{layout/common-head :: head}"></script>
    <style>
        #menu {
            font-size: 15px;
        }

        .down-right {
            margin-left: 7px;
            cursor: pointer;
        }

        .layui-layer-iframe {
            min-width: 550px;
            max-width: 580px;
        }
    </style>
</head>
<body>
<div class="x-nav">
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;"
       onclick="window.location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <blockquote class="layui-elem-quote">每个tr 上有两个属性 cate-id='1' 当前分类id fid='0' 父级id ,顶级分类为
                        0，有子分类的前面加收缩图标<i class="layui-icon x-show" status='true'>&#xe623;</i></blockquote>
                </div>
                <div class="layui-card-header">
                    <button class="layui-btn layui-btn-danger" id="batchDelete">
                        <i class="layui-icon"></i>批量删除
                    </button>
                    <button class="layui-btn" id="addParentMneu">
                        <i class="layui-icon layui-icon-add-circle"></i>添加一级菜单
                    </button>
                    <button class="layui-btn layui-btn-normal layui-btn-xs" id="fold">折叠所有菜单</button>
                    <button class="layui-btn layui-btn-normal layui-btn-xs" id="open">展开所有菜单</button>
                </div>
                <div class="layui-card-body">
                    <table class="layui-table layui-form" id="menu-table">
                        <thead>
                        <tr>
                            <th width="10">
                                <input lay-filter="selectAll" type="checkbox" lay-skin="primary">
                            </th>
                            <th width="150">code</th>
                            <th>名称</th>
                            <th width="200">描述</th>
                            <th width="50">排序</th>
                            <th width="80">状态</th>
                            <th width="250">操作</th>
                        </tr>
                        </thead>
                        <tbody class="x-cate" id="table-body">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var layer
    window.onload = function () {
        layui.use(['form', 'jquery', 'layer', 'tree', 'dropdown'], function () {
            layer = layui.layer
            var form = layui.form,
                $ = layui.jquery,
                tree = layui.tree,
                dropdown = layui.dropdown
            var tableData
            // 加载表格
            app.ajax({
                url: '/menu/list',
                success(data) {
                    tableData = data.data
                    initTable(tableData)
                    form.render()// 重新渲染表单
                }
            })

            // 批量删除
            $('#batchDelete').click(function () {
                var codes = ''
                $('#menu-table .layui-form-checked').each(function (i, e) {
                    var ele = $(e).parent().find('input').attr('id')
                    if (ele && ele.toString().indexOf('-') != -1) {
                        codes += ele.split('-')[1] + ','
                    }
                })
                if (codes.length == 0) {
                    layer.msg('请先选择要删除的菜单')
                    return;
                }
                var index = layer.confirm('是否删除选择的菜单？其下子菜单也一并被删除！', {icon: 3, title: '提示'}, function (index) {
                    app.ajax({
                        data: {"codes": codes},
                        type: 'post',
                        url: '/menu/batchDelete',
                        success(data) {
                            if (data.code == 0) {
                                layer.alert(data.msg, {
                                        icon: 6
                                    },
                                    function () {
                                        window.location.reload()
                                    });
                                layer.close(index);
                            }
                        }
                    })
                });
            })

            // 添加一级菜单
            $('#addParentMneu').click(function () {
                layer.open({
                    type: 2,
                    title: '添加一级菜单',
                    area: ['42vw', '540px'],
                    content: '/menu/addParentMneu'
                });
            })

            // 全选
            form.on('checkbox(selectAll)', function (data) {
                $('.cb').each(function (i, e) {
                    if (data.elem.checked != $(e).attr('checked')) {
                        $(e).prop("checked", data.elem.checked)
                    }
                })
                form.render()
            });

            //监听状态开关
            form.on('switch(statusSwitch)', function (data) {
                console.log(data.elem.checked)
                var code = $(data.elem).parent().parent().attr('code');
                app.ajax({
                    type: 'post',
                    data: {code: code, status: data.elem.checked},
                    url: '/menu/update/status',
                    success(data) {
                        layer.msg(data.msg)
                    }
                })
            });

            function initTable(data) {
                if (data == '') {
                    $('#table-body').html('')
                    return;
                }
                // 渲染表格
                var html = getChildrenTr(data, '', 0)
                $('#table-body').html(html)

                // 子页面隐藏展开
                $('.down-right').click(function () {
                    var v = $(this)
                    var code = v.attr('id').split('-')[1];
                    var childCode = tableData.filter(function (e, i) {
                        return e.parentCode == code;
                    })
                    if (v.hasClass('layui-icon-down')) {
                        v.removeClass('layui-icon-down')
                        v.addClass('layui-icon-right')
                        childCode.filter(function (e) {
                            $('[code="' + e.code + '"]').hide()
                        })
                    } else {
                        v.removeClass('layui-icon-right')
                        v.addClass('layui-icon-down')
                        childCode.filter(function (e) {
                            $('[code="' + e.code + '"]').show()
                        })
                    }
                })

                // 折叠所有
                $('#fold').click(function () {
                    var has = false
                    $('#menu-table .layui-icon-down').each(function (i, e) {
                        $(e).removeClass('layui-icon-down')
                        $(e).addClass('layui-icon-right')
                        has = true;
                    })
                    if (has) {
                        tableData.filter(function (e, i) {
                            var pcode = $('#menu-table tr[code="' + e.code + '"]').attr('pcode');
                            if (pcode != 'null') {
                                $('#menu-table tr[code="' + e.code + '"]').hide()
                            }
                            return true;
                        })
                    }
                })
                // 展开所有
                $('#open').click(function () {
                    var has = false
                    $('#menu-table .layui-icon-right').each(function (i, e) {
                        $(e).removeClass('layui-icon-right')
                        $(e).addClass('layui-icon-down')
                        has = true;
                    })
                    if (has) {
                        tableData.filter(function (e, i) {
                            var pcode = $('#menu-table tr[code="' + e.code + '"]').attr('pcode');
                            if (pcode != 'null') {
                                $('#menu-table tr[code="' + e.code + '"]').show()
                            }
                            return true;
                        })
                    }
                })

                // 添加子菜单事件
                $('.add-menu').click(function () {
                    layer.open({
                        type: 2,
                        title: '添加子菜单',
                        area: ['42vw', '540px'],
                        content: '/menu/add?code=' + $(this).attr('code')
                    });
                })

                // 编辑菜单
                $('.edit-menu').click(function () {
                    layer.open({
                        type: 2,
                        title: '编辑菜单',
                        area: ['42vw', '540px'],
                        content: '/menu/edit?code=' + $(this).attr('code')
                    });
                })
                // 编辑一级菜单
                $('.edit-parent-menu').click(function () {
                    layer.open({
                        type: 2,
                        title: '编辑菜单',
                        area: ['42vw', '540px'],
                        content: '/menu/editParentMneu?code=' + $(this).attr('code')
                    });
                })

                // 删除菜单
                $('.delete-menu').click(function () {
                    var code = '' + $(this).attr('code')
                    layer.confirm('是否删除该菜单？其下子菜单也一并被删除！', {icon: 3, title: '提示'}, function (index) {
                        app.ajax({
                            data: {code: code},
                            type: 'post',
                            url: '/menu/delete',
                            success(data) {
                                if (data.code == 0)
                                    setTimeout(function () {
                                        layer.msg(data.msg)
                                        setTimeout(function () {
                                            window.location.reload()
                                        }, 2000)
                                    }, 500)
                                layer.close(index);
                            }
                        })

                    });
                })
            }

            function getAllChildCode(pcode, data) {
                var res = data.filter(function (e) {
                    return e.parentCode == pcode
                })
                if (res.length > 0) {
                    for (var i = 0; i < res.length; i++) {
                        var allChildCode = []
                        allChildCode = getAllChildCode(res[i].code, data);
                        for (var j = 0; j < allChildCode.length; j++)
                            res.push(allChildCode[j])
                    }
                    return res;
                } else
                    return res
            }

            function getChildrenTr(data, parentCode, depth) {
                var ch = data.filter(function (e) {
                    if (depth == 0)
                        return e.parentCode == '' || e.parentCode == null
                    return e.parentCode == parentCode
                })
                var html = ''
                for (var i = 0; i < ch.length; i++) {
                    var child = data.filter(function (e) {
                        return e.parentCode == ch[i].code
                    })
                    html += getTr(ch[i], depth, child.length > 0)
                    if (child.length > 0) {
                        html += getChildrenTr(data, ch[i].code, depth + 1)
                    }
                }
                return html
            }

            function getTr(data, depth, existChild) {
                var html = '<tr code="' + data.code + '" pcode="' + data.parentCode + '">' +
                    '<td><input type="checkbox" class="cb" id="cb-' + data.code + '" lay-skin="primary"></td>' +
                    '<td>' + data.code + '</td>' +
                    (depth == 0 ? '<td>' + data.title + addIcon(existChild, data.code) + '</td>' :
                            '<td style="padding-left: ' + (depth * 30) + 'px">|-'
                            + data.title + addIcon(existChild, data.code) + '</td>'
                    ) +
                    '<td>' + data.description + '</td>' +
                    '<td>' + data.seq + '</td>' +
                    '<td><input type="checkbox"  lay-text="开启|停用" lay-filter="statusSwitch" name="statusSwitch" ' +
                    (data.status == 1 ? 'checked="checked"' : '') + '" lay-skin="switch"></td>' +
                    '<td>' +
                    '<button code="' + data.code + '" class="layui-btn layui-btn-xs add-menu">' +
                    '<i class="layui-icon layui-icon-add-1" style="font-size: 30px; color: white;"></i>添加子菜单</button>' +
                    '<button code="' + data.code + '" class="layui-btn layui-btn-xs ' +
                    (data.parentCode == '' || data.parentCode == null ? 'edit-parent-menu">' : 'edit-menu">') +
                    '<i class="layui-icon layui-icon-edit" style="font-size: 30px; color: white;"></i>编辑</button>' +
                    '<button code="' + data.code + '" class="layui-btn layui-btn-danger layui-btn-xs delete-menu">' +
                    '<i class="layui-icon layui-icon-delete" style="font-size: 30px; color: white;"></i>删除</button>' +
                    '</td>' +
                    '</tr>'
                return html;
            }

            function addIcon(isParent, code) {
                if (isParent) {
                    return '<i id="i-' + code + '" class="layui-icon down-right layui-icon-down"></i>'
                }
                return ''
            }
        });
    }
</script>
</body>
</html>
